<template>
  <div class="back-top visible-lg" v-if="btnFlag">
    <div>品质好货</div>
    <div>猜你喜欢</div>
    <div @click="backTop">
      <img
        style="width: 10px; heoght: 10px"
        src="~assets/image/totop.png"
        alt=""
      />
      <p>顶部</p>
    </div>
    <div>
      <p></p>
      <p>反馈</p>
    </div>
    <div>暴恐举报</div>
  </div>
</template>

<script>
export default {
  name: "BackTop",
  data() {
    return {
      btnFlag: false,
    };
  },
  mounted() {
    //添加滚动条的监听
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    //删除监听
    window.removeEventListener("scroll", this.scrollToTop);
  },
  methods: {
    backTop() {
      const that = this;
      //滚动条的位置取反
      let ispeed = Math.floor(-that.scrollTop);
      //回到顶部位置
      document.documentElement.scrollTop = document.body.scrollTop =
        that.scrollTop + ispeed;
    },
    scrollToTop() {
      const that = this;
      //当前滚动条的位置
      let scrollTop =
        window.pageXOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      this.scrollTop = scrollTop;
      //控制显示
      if (that.scrollTop > 800 && document.body.offsetWidth > 1700) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
  },
};
</script>

<style scoped>
@import "assets/css/backtop.css";
</style>